<style lang="scss">
.picker-shop {
  .sp-filter-form {
    padding: 8px 8px 0px 8px;
  }
  .sp-finder-hd {
    display: none;
  }
  .disableheadselection {
    > .cell .el-checkbox__inner {
      display: none;
    }
  }
  .el-pagination {
    margin: 0;
    padding: 10px;
  }
}
</style>
<template>
  <div class="picker-shop">
    <SpFilterForm :model="formData" size="small" @onSearch="onSearch" @onReset="onSearch">
      <SpFilterFormItem prop="agents_name">
        <el-input v-model="formData.agents_name" placeholder="请输入代理商名称" />
      </SpFilterFormItem>
    </SpFilterForm>
    <SpFinder
      ref="finder"
      :class="['shop-finder', { 'no-multiple': !multiple }]"
      :other-config="{
        'max-height': 460,
        'header-cell-class-name': cellClass
      }"
      url="/agents/list"
      :fixed-row-action="true"
      :setting="setting"
      :hooks="{
        beforeSearch: beforeSearch,
        afterSearch: afterSearch
      }"
      @select="onSelect"
      @selection-change="onSelectionChange"
    />
    <!-- <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="agents_name" label="代理商姓名" />
    </el-table> -->
  </div>
</template>

<script>
import { createSetting } from '@shopex/finder'
// import district from '@/common/district.json'
import BasePicker from './base'
import PageMixin from '../mixins/page'
export default {
  name: 'PickerAgent',
  extends: BasePicker,
  mixins: [PageMixin],
  config: {
    title: '选择代理商'
  },
  props: ['value'],
  data() {
    return {
      formData: {
        // region: [],
        // keywords: ''
        agents_name:'',
      },
      // district,
      // regionArea: [],
      loading: false,
      multiple: this.value?.multiple ?? true,
      // 列表
      loading: false,
      tableData: [],
      total_count: 0,
    }
  },
  computed: {
    setting() {
      const columns = [
        { name: '招商代理', key: 'agents_name' },
      ]
      return createSetting({
        columns
      })
    }
  },
  created() {
    // this.fetch()
    // this.fetchList();
  },
  methods: {
    // 无用
    fetchList() {
      this.loading = true
      const { pageIndex: page, pageSize } = this.page
      let params = {
        page,
        pageSize,
        ...this.formData
      }
      this.$api.agent.getTheAgentList(params).then((res) => {
        console.log('getTheAgentList',res)
        this.tableData = res.list
        this.total_count = Number(res.total_count)
        // this.datapass_block = res.data.data.datapass_block
        this.loading = false
      })
    },
    // 无用
    beforeSearch(params) {
      params = {
        ...params,
        ...this.formData,
      }
      return params
    },
    // 无用
    afterSearch(response) {
      console.log('afterSearch',response)
      const { list } = response.data.data
      console.log('list',list)
      if (this.value.data) {
        const selectRows = list.filter((item) => this.value.data.includes(item.agent_id))
        console.log('selectRows',selectRows)
        const { finderTable } = this.$refs.finder.$refs
        setTimeout(() => {
          finderTable.$refs.finderTable.setSelection(selectRows)
        })
      }
    },
    onSearch() {
      this.$refs.finder.refresh(true)
      // this.fetchList();
    },
    onSelect(selection, row) {
      if (this.multiple) {
        // this.updateVal(selection)
      } else {
        const { finderTable } = this.$refs.finder.$refs
        console.log('finderTable:', finderTable)
        finderTable.clearSelection()
        setTimeout(() => {
          finderTable.$refs.finderTable.setSelection(selection.length > 0 ? [row] : [])
          // this.updateVal([row])
        })
      }
    },
    onSelectionChange(selection) {
      this.updateVal(selection)
    }
  }
}
</script>
